<template>
  <Dialog ref="dialog" title="志愿表" :isSendBus="true" style="width: 900px">
    <el-table
      :data="volunteerInfos"
      style="width: 100%; height: 200px"
      :header-cell-style="{ 'border-bottom': 'none' }"
      :header-row-style="{ height: '60px' }"
      :cell-style="{ height: '60px', 'border-bottom': 'none' }"
      stripe
    >
      <el-table-column class-name="table-column-list" label="顺序" width="50">
        <template #default="scope">
          <div style="padding: 10px 0">
            {{ zy_type == 3 ? scope.row.key : scope.$index + 1 }}
          </div>
          <div v-for="(item, index) in scope.row.majorsInfo">
            <div style="color: transparent; padding: 10px 0">{{ index }}</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="录取概率" width="80">
        <template #default="scope">
          <div style="padding: 10px 0">{{ scope.row.chance }}%</div>
          <div
            style="padding: 10px 0"
            v-for="(item, index) in scope.row.majorsInfo"
          >
            {{ item.chance }}%
          </div>
        </template>
      </el-table-column>
      <el-table-column label="院校/专业">
        <template #default="scope">
          <div style="padding: 10px 0">
            {{ scope.row.collegeRealName }}
          </div>
          <div
            style="padding: 10px 0"
            v-for="(item, index) in scope.row.majorsInfo"
          >
            {{ item.professionName }}
          </div>
        </template>
      </el-table-column>
    </el-table>
  </Dialog>
</template>

<script setup>
import Dialog from '@/components/Dialog/Dialog.vue';
import { ref } from 'vue';
import { getZyInfo } from '/src/api/appv2/appv2.js';

const dialog = ref(null);

// 志愿详情信息
const zyInfo = ref({});
// 志愿表信息
const volunteerInfos = ref([]);
// 志愿表的index
const index = ref('');
// 志愿表的index
const zy_type = ref('');
// 学生数据
const studentData = ref({});
// 学生信息
const studentInfo = ref({});

// 获取志愿表信息
function getVolunteerInfo() {
  getZyInfo({
    index: index.value,
    studentId: studentData.value.studentId,
  }).then((res) => {
    zyInfo.value = res.data;
    localStorage.setItem('course', res.data.course||"");
    if (zy_type.value == 3) {
      // 四川类型
      for (let key in zyInfo.value.volunteerInfos) {
        let data = zyInfo.value.volunteerInfos[key];
        let volunteerInfo = {};
        volunteerInfo = data.collegeData;
        volunteerInfo.key = key;
        volunteerInfo.majorsInfo = data.majorsInfo;

        volunteerInfos.value.push(volunteerInfo);
      }
    } else {
      volunteerInfos.value = zyInfo.value.volunteerInfos;
    }
  });
}

function openChange(val) {
  index.value = val.index;
  zy_type.value = val.zy_type;
  studentData.value = val.studentData;
  studentInfo.value = val.studentData.student;

  getVolunteerInfo();
  dialog.value.openChange();
}

defineExpose({
  openChange,
});
</script>

<style>
.table-column-list {
  border-bottom: none;
}
</style>
